<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<link rel="stylesheet" href="../css/loading.css" />
		<link rel="stylesheet" href="../css/organize-groups.css" />
		<style>
			.mui-bar .mui-title {
				right: 80px;
			}
			
			[v-cloak] {
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="Loading">
			<div class="loader-inner ball-beat">
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
		<div id="pullrefresh">
			<div class="mui-content" id='mui-content' style="padding-top: 44px;" v-cloak>
				<header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
					<h1 class="mui-title">{{intro.name}}</h1>
					<a class="mui-icon iconfont icon-qingdan mui-pull-right" href="#popover" id='btndepart'></a>
					<a class="mui-icon iconfont icon-sousuo mui-pull-right" style="margin-right: 5px;" id='btnsearch'></a>
				</header>
				<div class="list-single">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell" v-for="item in itemsusers" @click="showChat(item)">
							<div class="mui-col-xs-12">
								<img class="mui-media-object mui-pull-left" style="border-radius: 5px;" src="../images/qq.png">
								<div style="line-height: 42px;font-size: 16px;">
									{{item.name}}
								</div>
							</div>
						</li>
						<li class="mui-table-view-cell orgs" v-for="item in itemsorgs" @click='showOrg(item)'>
							<div class="mui-col-xs-12">
								<img class="mui-media-object mui-pull-left" style="border-radius: 5px;" src="../images/dzz.jpg">
								<div class="mui-media-body" style="font-size: 16px; line-height: 20px; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
									{{item.name}}
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div v-if="intro.usersTotalCount != 0" class="title" style="text-align: center;">
					共{{intro.usersTotalCount}}人
				</div>
				<div v-else class="title" style="text-align: center; padding-top: 20px; ">
					暂无人员信息
				</div>
				<div id="popover" class="mui-popover">
					<div class="message bottom" style="display: block;">
						<div class="mui-row">
							<div class="icon" style="color: #f00;">
								<span class="mui-icon iconfont icon-zhibuhuodong"></span>
							</div>
							<p class="content">组织名称：{{intro.name}}</p>
						</div>
						<div class="mui-row">
							<div class="icon iconfont" style="color: #f00;">
								<span class="mui-icon iconfont icon-organizationalstruc-copy"></span>
							</div>
							<p class="content">组织情况：{{intro.intro}}</p>
						</div>
						<div class="mui-row">
							<div class="icon" style="color: #f00;">
								<span class="mui-icon iconfont icon-qingdan"></span>
							</div>
							<p class="content">成立时间：{{intro.establishTime == null ? '' : intro.establishTime.split('T')[0]}}</p>
						</div>
						<div class="mui-row">
							<div class="icon" style="color: #f00;">
								<span class="mui-icon iconfont icon-qingdan"></span>
							</div>
							<p class="content">换届时间：{{intro.replaceTime == null ? '' : intro.replaceTime.split('T')[0]}}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>
<script type="text/javascript" src="../js/mui.min.js"></script>
<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript" src="../js/localStorage.js"></script>
<script type="text/javascript">
	/*mui.init({
												pullRefresh: {
													container: '#pullrefresh',
													down: {
														style: 'circle',
														color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
														height: 50, //可选,默认50.触发下拉刷新拖动距离,
														range: '100px', //可选 默认100px,控件可下拉拖拽的范围
														offset: '0px', //可选 默认0px,下拉刷新控件的起始位置		
														contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
														contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
														contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容

														callback: pulldownRefresh
													}
												}
											});*/

	mui.init();

	mui.plusReady(function() {

		var pinfo = plus.webview.currentWebview().info; //	当前组织机构信息
		var orgdata = localStorageFunc.get('organize'); //	组织机构信息
		/*console.log('orgdata组织数据:' + JSON.stringify(orgdata));
		console.log('pinfo组织数据:' + JSON.stringify(pinfo));*/

		var organizationsArr = [];
		var usersArr = [];

		$.each(orgdata.organizations, function(index, item) {
			if(pinfo.id == item.parentId) {
				organizationsArr.push(item);
			}
		});
		$.each(orgdata.users, function(index, item) {
			if(pinfo.id == item.organizationIds) {
				usersArr.push(item);
			}
		});

		new Vue({
			created: function() {
				document.body.removeChild(document.getElementById('Loading'));
			},
			el: '#mui-content',
			data: {
				itemsusers: usersArr,
				itemsorgs: organizationsArr,
				intro: pinfo
			},
			methods: {
				//	查看个人信息
				showIntro: function(item) {
					mui.openWindow({
						url: '/html/my-center.html',
						id: 'my-center',
						createNew: false,
						extras: {
							'info': item
						},
						show: {
							autoShow: true,
							aniShow: 'slide-in-right',
							duration: 300
						},
						waiting: {
							autoShow: true,
							title: '正在加载...'
						}
					})
				},

				//	实时沟通
				showChat: function(item) {

					var appid = localStorageFunc.get('applogininfo').id;
					if(item.id == appid) {
						mui.toast('不支持和自己实时沟通');
						return;
					}
					mui.openWindow({
						url: '/html/im-chat.html',
						id: 'im-chat',
						createNew: false,
						extras: {
							'chattype': '0', //chattype类型：0 单聊 ; 1 群聊
							"userid": item.id, //自定义扩展参数，可以用来处理页面间传值
							"notestype": item.name,
							'userinfo': item
						},
						show: {
							autoShow: true,
							aniShow: 'slide-in-right',
							duration: 300
						},
						waiting: {
							autoShow: true,
							title: '正在加载...'
						}
					});
				},

				//	组织机构查看
				showOrg: function(item) {
					mui.openWindow({
						url: '/html/organize-groups-list.html',
						id: 'organize-groups-list?id=' + item.id, //id唯一，才能公用一个界面
						createNew: false,
						extras: {
							"info": item
						},
						show: {
							autoShow: true,
							aniShow: 'slide-in-right',
							duration: 300
						},
						waiting: {
							autoShow: true,
							title: '正在加载...'
						}
					})
				}
			},
			mounted() {
				//	处理不超过一行时，居中显示；多行数据时只显示两行数据并以省略号操出
				if($("#mui-content .orgs .mui-media-body").length > 0) {
					$.each($("#mui-content .orgs .mui-media-body"), function(index, item) {
						if($(item).height() <= 30) {
							$(item).css('line-height', '45px');
						} else {
							$(item).css('line-height', '20px');
						}
					})
				}
			}
		})

		/*mui('body').on('tap', '#mui-groupschat li a', function() {
			mui.openWindow({
				url: '/html/im-chat.html',
				id: 'im-chat',
				createNew: false,
				extras: {
					'chattype': '0', //chattype类型：0 单聊 ; 1 群聊
				},
				show: {
					autoShow: true,
					aniShow: 'slide-in-right',
					duration: 300
				},
				waiting: {
					autoShow: true,
					title: '正在加载...'
				}
			})
		})*/

		//	搜索
		mui('body').on('tap', '#btnsearch', function() {
			mui.openWindow({
				url: '/html/organize-search.html',
				id: 'organize-search',
				createNew: false,
				/*extras: {
					'chattype': '1', //chattype类型：0 单聊 ; 1 群聊
					"userid": grounpid, //自定义扩展参数，可以用来处理页面间传值
					"notestype": grounpname
				},*/
				show: {
					autoShow: true,
					aniShow: 'slide-in-right',
					duration: 300
				},
				waiting: {
					autoShow: true,
					title: '正在加载...'
				}
			})
		});
	});

	// 下拉刷新具体业务实现
	function pulldownRefresh() {

		setTimeout(function() {
			mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
			mui.toast('下拉刷新成功');
		}, 500);
	}
</script>